.login-tips {
  position: absolute;
  top: 4%;
  left: 5%;
  z-index: 9;
  font-size: 40px;
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
}
.lang-select {
  position: absolute;
  top: 5%;
  right: 5%;
  background-color: #fff;
  font-size: $font-size-large-x;
  padding: 4px;
  @include borderRadius(4px);
  cursor: pointer;
  z-index: 9;
}

.login-container {
  height: 100vh;
  @include fj(center);
  overflow: hidden;
  position: relative;
  align-items: center;
  & > .div {
    position: absolute;
    opacity: .5;
  }
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    backdrop-filter: blur(150px);
  }
  .g-polygon-1 {
    bottom: 100px;
    left: 50%;
    transform: translate(-50%, 0);
    @include wh(714px, 390px);
    background: linear-gradient(#ffee55, #fdee99);
    clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
  }
  .g-polygon-2 {
    bottom: 0px;
    left: 30%;
    transform: translate(-50%, 0);
    @include wh(1000px, 450px);
    background: linear-gradient(-36deg, #E950D1, #f980D9);
    clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
  }
  .g-polygon-3 {
    bottom: 0px;
    left: 70%;
    transform: translate(-50%, 0);
    @include wh(1000px, 450px);
    background: rgb(71, 71, 77);
    clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
  }
  .g-polygon-4 {
    top: 0px;
    left: 70%;
    transform: translate(-50%, 0);
    @include wh(1000px, 450px);
    background: #00dbde;
    clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
  }
  .g-polygon-5 {
    top: 0px;
    left: 0;
    transform: translate(-50%, 0);
    @include wh(1000px, 450px);
    background: #ff00bf;
    clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
  }
  .login-form {
    width: 670px;
    border-radius: 6px;
    background-color: #fff;
    position: absolute;
    z-index: 9;
    box-shadow: 0 0 100px rgba(255, 255, 255, 0.2);
    .title-container {
      position: relative;
      z-index: 1;
      height: 180px;
      display: flex;
      @include fj(center);
      align-items: center;
      border-radius: 6px 6px 0 0;
      background-image: url('../../assets/image/login.jpg');
      &::after {
        z-index: -1;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        @include wh(100%, 100%);
        border-radius: 6px 6px 0 0;
        background-color: rgba(54, 84, 99, 0.7);
      }
      .title {
        margin: 0;
        @include sc(30px, $color-text);
        font-family: Microsoft Yahei;
      }
    }
    .form {
      padding: 50px 120px 0 120px;
      .form-item {
        @include fl();
        position:relative;
      }
      .preicon {
        position: absolute;
        z-index: 99;
        top: 30%;
        left: 10px;
      }
      .login-btn {
        border: 0;
        width: 100%;
        padding: 18px 0;
        margin: 20px 0;
        border: none !important;
        animation: up-down 1.5s  ease-in-out infinite alternate-reverse both;
        background: linear-gradient(-135deg, #00dbde, #fc00ff) !important;
        &:hover {
          transition: all .5s;
          background: linear-gradient(-135deg, #5b53d8, #42a9d1) !important;
        }
      }
    }
    .login-type {
      @include fl();
      padding: 30px 120px;
      justify-content: space-between;
      .icon {
        @include wh(1.6rem, 1.6rem);
      } 
      .mobile-login-text {
        color: $color-text-p;
      }
      .icon, .mobile-login-text {
        &:hover {
          cursor: pointer;
        }
      }
    }
    .login-options {
      @include fl();
      padding: 15px 120px 0 120px;
      justify-content: space-between;
    }
  }
}
@-webkit-keyframes up-down {
	0% { transform:translateY(10px) }
	100% { transform:translateY(-10px) }
}
@keyframes up-down {
	0% { transform:translateY(10px) }
	100% { transform:translateY(-10px) }
}
@media (max-width: 1000px){
  .login-container {
    .login-form {
      width: 340px;
      .form {
        padding: 30px 10px 0 10px;
      }
      .login-type {
        padding: 10px 10px 15px 10px;
      }
      .login-options {
        padding: 10px 10px 15px 10px;
      }
    }
  }
}